<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            transition: 7s;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-size: cover;
            background-image: url(1.jpg);
        }
        .login{
            height: 270px;
            padding: 100px;
            display: flex;
            align-items: center;
            flex-direction: column;
            background-color: rgba(255, 255, 255, 0.22);
            border-radius: 40px;
            box-shadow: 0 0 60px rgba(255,255,255,0.5) inset;

        }

        .title{
            font-size: 30px;
            height: 60px;
            margin: 10px 0;
            color: #fff;
            text-shadow: 0 0 10px rgba(111, 203, 245, 0.89);
        }

        .head{
            font-size: 40px;
            height: 60px;
            margin: 10px 0;
            color: rgba(255, 255, 255, 0.91);
            text-shadow: 0 0 10px rgba(203, 226, 90, 0.76);
        }
        input[type="text"],
        input[type="password"]{
            width: 75%;
            height: 60px;
            margin: 10px 0;
            box-sizing: border-box;
            color: rgb(0,0,0);
            border: 5px solid transparent;
            background: rgba(255,255,255,.5);
            border-radius: 50px;
            padding: 8px 20px 4px 20px;
            transition: 0.3s;
            outline: none;
            font-size: 18px;
        }


        button[type="btn"]{
            width: 170px;
            height: 50px;
            padding: 10px;
            margin: 15px 0;
            border-radius: 100px;
            border: none;
            background-color: #67a8f0;
            color: #fff;
            cursor: pointer;
            font-size: 20px;
            letter-spacing: 3px;
        }


        input::placeholder{
            color: rgba(125, 133, 133, 0.49);
        }

    </style>
</head>
<body>

<div class="login">
    <h4 class="head">充电桩后台管理系统</h4>
    <h2 class="title">Login</h2>
    <input type="text" placeholder="请输入账号：" id="name">
    <input type="password" placeholder="请输入密码：" id="pwd">
    <a href="index.html"><button type="btn" onclick="login()">登录</button></a>
</div>



<script>
    function login(){
        const name = document.getElementById("name").value;
        const pwd = document.getElementById("pwd").value;
        if(!name || !pwd){
            alert("请输入用户名和密码")
            return
        }
        fetch('/login', {
            method: "POST",
            headers: {
                "Content-Type": "application/json;charset=UTF-8"
            },
            body: JSON.stringify({name: name, password: pwd})
        }).then(res =>res.text()).then(res => {
            if(res ){ //res不为Null在去解析JSON
                let json = JSON.parse(res)
                if(json.id){
                    location.href = '/'
                }
            }else {
                alert("账号或密码错误")
            }

        })

    }


</script>
</body>
</html>
